<template>
  <div class="wrapper"
    :loading="loading">
    <el-row>
      <el-col :span="6" v-if="abnormal_news">
        <el-collapse  class="order-collapse" :value="['order', 'other']">
          <!--异常信息-->
          <el-collapse-item title="异常信息" name="other">
            <div class="order-item">
              <span class="item-name">上报来源:</span>
              <span class="item-value">{{exception_order.exception_source_text}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">异常类型:</span>
              <span class="item-value">{{exception_order.exception_type_text}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">订单编号:</span>
              <span class="item-value">{{exception_order.order_sn}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">异常描述:</span>
              <span class="item-value">{{exception_order.exception_description}}</span>
            </div>
          </el-collapse-item>
          <!--订单信息-->
          <el-collapse-item title="订单信息" name="order">
            <div class="order-item">
              <span class="item-name">收货地址:</span>
              <span class="item-value">{{order_detail.ship_addr}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">收货人:</span>
              <span class="item-value">{{order_detail.ship_name}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">联系电话:</span>
              <span class="item-value">{{order_detail.ship_mobile}}</span>
            </div>
            <hr>
            <div class="order-item">
              <span class="item-name">订单编号:</span>
              <span class="item-value">{{order_detail.sn}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">付款方式:</span>
              <span class="item-value">{{order_detail.payment_type_text}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">付款渠道:</span>
              <span class="item-value">{{order_detail.payment_method_name}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">订单状态:</span>
              <span class="item-value">
                <span :class="order_detail.order_status_text === '已确认'  ? 'color-red' : order_detail.order_status_text === '已取消' ? 'color-red' : '' ">
                  {{order_detail.order_status_text === '已确认' ? '待付款' : order_detail.order_status_text}}
                </span>
              </span>
            </div>
            <div class="order-item">
              <span class="item-name">售后状态:</span>
              <span class="item-value">
                <span :class="order_detail.service_status === 'APPLY' ? 'color-red' : '' ">{{order_detail.service_status_text}}</span>
              </span>
            </div>
            <div class="order-item">
              <span class="item-name">下单时间:</span>
              <span class="item-value">{{order_detail.create_time | unixToDate('yyyy-MM-dd hh:mm')}}</span>
            </div>  
            <hr>   
            <div class="order-item">
              <span class="item-name">商品总价:</span>
              <span class="item-value">{{order_detail.goods_price}}元</span>
            </div> 
            <div class="order-item">
              <span class="item-name">配送方式:</span>
              <span class="item-value">{{order_detail.shipping_type_text}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">运费:</span>
              <span class="item-value">{{order_detail.shipping_price}}元</span>
            </div>
            <div class="order-item">
              <span class="item-name">订单总价:</span>
              <span class="item-value">{{order_detail.order_price}}元</span>
            </div>    
            <hr>  
            <div class="order-item">
              <span class="item-name">自提站点:</span>
              <span class="item-value">{{exception_order.site_name}}</span>
            </div>   
            <div class="order-item">
              <span class="item-name">站长姓名:</span>
              <span class="item-value">{{exception_order.site_leader_name}}</span>
            </div>  
            <div class="order-item">
              <span class="item-name">站长电话:</span>
              <span class="item-value">{{exception_order.site_leader_mobile}}</span>
            </div>  
            <div class="order-item">
              <span class="item-name">站长地址:</span>
              <span class="item-value">{{exception_order.site_address}}</span>
            </div> 
            <hr>
            <div class="order-item">
              <span class="item-name">团长姓名:</span>
              <span class="item-value">{{exception_order.member_realname_lv1}}</span>
            </div> 
            <div class="order-item">
              <span class="item-name">团长电话:</span>
              <span class="item-value">{{exception_order.member_mobile_lv1}}</span>
            </div>  
            <hr> 
            <div class="order-item">
              <span class="item-name">订单备注:</span>
              <span class="item-value">{{order_detail.remark}}</span>
            </div>
            <div class="order-item">
              <span class="item-name">送货时间:</span>
              <span class="item-value">{{order_detail.ship_time | unixToDate('yyyy-MM-dd hh:mm')}}</span>
            </div>          
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="16">
        <div class="abnormal-solve">
          <el-form
          :model="abnormalSolveForm"
          label-width="100px"
          ref="abnormalSolveForm"
          :rules="abnormalSolveRules">
          <!-- 解决说明 -->
            <el-form-item label="解决说明:" prop="claim_describe" v-if="clearDescription">
              <el-input 
              type="textarea" 
              :rows="5" maxlength="150" 
              placeholder="请说明异常解决办法" 
              v-model="abnormalSolveForm.claim_describe" 
              :disabled="disabled"
              ></el-input>
            </el-form-item>
            <el-form-item label="解决方式:">
              <!-- 补发商品 -->
              <template v-if="clearReissue">
                <el-row>
                  <el-col :span="8">
                    <el-checkbox :disabled="disabled" v-model="reissueGoods" @change="handleReissueGoodsChange(reissueGoods)">补发商品</el-checkbox>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item prop="delivery_time" label="出库日期:">
                      <el-date-picker
                        :disabled="disabled"
                        v-model="abnormalSolveForm.compensation_claim.delivery_time_string"
                        type="date"
                        style="width:150px"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <en-table-layout
                pagination
                ref="tableLayout"
                :height="tableHeight"
                :loading="loading"
                :tableData="abnormalSolveForm.compensation_claim.sku_list"
                :selectionChange="selectionChange">
                  <template slot="table-columns">
                    <el-table-column width="60" type="selection" v-if="clearAway"/>
                      <el-table-column min-width="100" label="购买商品">
                        <template slot-scope="{row}">
                          <span>{{row.name}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column min-width="100" prop="num" label="购买数量"></el-table-column>
                      <el-table-column min-width="100"  label="补发数量">
                        <template slot="header">
                          <span class="color-red">*</span>
                          <span>补发数量</span>
                        </template>
                        <template slot-scope="scope">
                          <el-form-item :prop="'compensation_claim.sku_list.'+scope.$index+'.compensation_num'" :rules="abnormalSolveRules.compensation_num">
                            <el-input-number v-model="scope.row.compensation_num" :value="1" controls-position="right" :min="1" :max="10000" :disabled="disabled"></el-input-number>
                          </el-form-item>
                        </template>
                    </el-table-column>
                  </template>
                </en-table-layout>
              </template>
              <!-- 赠送礼品 -->
              <div v-if="clearGiveAway" class="top-status">
                <el-row>
                  <el-col :span="8">
                    <el-checkbox v-model="giveAway" :disabled="disabled" @change="handleGiveAwayChange(giveAway)">赠送礼品</el-checkbox>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="handsel_time" label="出库日期:">
                      <el-date-picker
                        :disabled="disabled"
                        v-model="abnormalSolveForm.free_claim.delivery_time_string"
                        type="date"
                        style="width:150px"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="primary" size="mini" @click="addCommodity()" v-if="clearAway">+ 添加商品</el-button>
                  </el-col>
                </el-row>
                <el-table :data="abnormalSolveForm.free_claim.sku_list">
                    <el-table-column min-width="100" prop="goods_name" label="赠送商品"></el-table-column>
                    <el-table-column min-width="100" prop="price" label="商品单价"></el-table-column>
                    <el-table-column min-width="100"  label="赠送数量">
                      <template slot="header">
                        <span class="color-red">*</span>
                        <span>补发数量</span>
                      </template>
                      <template slot-scope="scope">
                        <el-form-item :prop="'free_claim.sku_list.'+scope.$index+'.compensation_num'" :rules="abnormalSolveRules.handsel_num">
                          <el-input-number v-model="scope.row.compensation_num" controls-position="right" :min="1" :max="10000" :disabled="disabled"></el-input-number>
                        </el-form-item>
                      </template>
                  </el-table-column>
                  <el-table-column label="操作" width="100" v-if="clearAway">
                    <template slot-scope="{ row }">
                      <el-button type="danger" @click="handleDelete(row)" :disabled="disabled">删除此项</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 补偿优惠卷 -->
              <template v-if="clearCoupon">
                <template>
                  <el-checkbox :disabled="disabled" class="top-status" v-model="compensateCoupon" @change="handleCompensateCouponChange(compensateCoupon)">补偿优惠卷</el-checkbox>
                </template>
                <el-form-item>
                  <el-select 
                    placeholder="请选择售后优惠卷" 
                    v-model="abnormalSolveForm.coupon_claim.coupon_id" 
                    style="width:100%" 
                    @change="handleCouponChange(abnormalSolveForm.coupon_claim.coupon_id)"
                    clearable
                    :disabled="disabled">
                    <el-option 
                    v-for="(item,index) in coupons"
                    :key="index"
                    :label="item.label"
                    :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <!-- 赔付现金 -->
              <template v-if="clearPayMoney">
                <template>
                  <el-checkbox :disabled="disabled" class="top-status" v-model="payMoney" @change="handlePayMoneyChange(payMoney)">赔付现金</el-checkbox>
                </template>
                <el-form-item>
                  <el-input :min="0.00" :precision="2" type="number"  v-model="abnormalSolveForm.payment_claim.claim_price" @change="handlePriceChange" placeholder="请输入赔付金额" :disabled="disabled">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </template>
              <!-- 多退少补 -->
              <template v-if="clearRefundMore">
                <template>
                  <el-checkbox :disabled="disabled" class="top-status" v-model="refundMore" @change="handleRefundMoreChange(refundMore)">多退少补</el-checkbox>
                </template>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-select
                    v-model="abnormalSolveForm.refund_claim.refund_reason"
                    clearable
                    @change="handleRefundTypeChange"
                    :disabled="disabled">
                      <el-option
                      v-for="(item,index) in refundTypes"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="18">
                      <el-input
                      placeholder="金额"
                      v-model="abnormalSolveForm.refund_claim.claim_price"
                      @change="handleRefundTypeChange"
                      :disabled="disabled">
                        <template slot="append">元</template>
                      </el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-input
                    placeholder="多退少补描述"
                    type="textarea"
                    v-model="abnormalSolveForm.refund_claim.claim_describe"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    @change="handleRefundTypeChange"
                    :disabled="disabled"></el-input>
                  </el-col>
                </el-row>
              </template>
              <!-- 其他 -->
              <template v-if="clearOther">
                <template>
                  <el-checkbox :disabled="disabled" class="top-status" v-model="otherTheWay" @change="handleOtherTheWayChange(otherTheWay)">其他方式</el-checkbox>
                </template>
                <el-row>
                  <el-col :span="24">
                    <el-input
                    placeholder="描述处理方式"
                    v-model="abnormalSolveForm.other_claim.claim_describe"
                    @change="handleOtherChange"
                    :disabled="disabled"></el-input>
                  </el-col>
                </el-row>
              </template>
              <el-button v-if="abnormal_news" type="primary" class="top-status" @click="submit('abnormalSolveForm')" size='medium'>确认处理</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!-- 商品选择器 -->
    <en-goods-sku-picker
      type="seller"
      goods-type="NORMAL"
      :show="ShowDialog"
      :sku="true"
      :api="goodsApi"
      :multipleApi="multipleApi"
      :defaultData="skuIds"
      :categoryApi="categoryApi"
      :limit="maxsize"
      @confirm="defineBtn"
      @close="handleCloseDialog"/>
  </div>
</template>

<script>
  import * as API_Messages from '@/api/message'
  import { GoodsSkuPicker } from '@/components'
  export default {
    components: {
      [GoodsSkuPicker.name]: GoodsSkuPicker
    },
    data () {
      return {
        // 加载动画
        loading: false,
        tableHeight: 200,
        ClaimsStatus: true,
        disabled: false,
        multipleChoice: [],
        /** 商品选择器列表api*/
        goodsApi: 'seller/goods/skus?market_enable=1&is_auth=1',
        multipleApi: 'seller/goods/skus/@ids/details',
        /** 商城分类api */
        categoryApi: 'seller/goods/category/0/children',
        // 添加商品弹框
        ShowDialog: false,
        // 补发商品
        reissueGoods: false,
        // 赠送礼品
        giveAway: false,
        // 赠送优惠卷
        compensateCoupon: false,
        // 赔付现金
        payMoney: false,
        // 多退少补
        refundMore: false,
        // 其他方式
        otherTheWay: false,
        // 判断左边是否展示
        abnormal_news: true,
        // 清除解决说明
        clearDescription: true,
        // 清除补发商品
        clearReissue: true,
        // 清除赠送礼品
        clearGiveAway: true,
        // 清除售后优惠卷
        clearCoupon: true,
        // 清除赔付现金
        clearPayMoney: true,
        // 清除多退少补
        clearRefundMore: true,
        // 清除其他
        clearOther: true,
        // 清除展示页面的按钮
        clearAway: true,
        exceptionId: undefined,
        skuIds: [],
        /** 商品选择器最大长度*/
        maxsize: 0,
        // 异常信息
        exception_order: {},
        // 订单信息
        order_detail: {},
        id: undefined,
        exception_sn: undefined,
        order_sn: undefined,
        // 多退少补原来的钱
        backOut: undefined,
        // 处理异常
        abnormalSolveForm: {
          exception_id: undefined,
          exception_sn: undefined,
          member_id: undefined,
          order_sn: undefined,
          claim_describe: undefined,
          order_sku_dtolist: [],
          // 补发商品
          compensation_claim: {
            claim_type: undefined,
            delivery_time_string: undefined,
            sku_list: []
          },
          // 赠送礼品
          free_claim: {
            claim_type: undefined,
            delivery_time_string: undefined,
            sku_list: []
          },
          // 补偿优惠卷
          coupon_claim: {
            claim_type: undefined,
            coupon_id: undefined
          },
          // 赔付现金
          payment_claim: {
            claim_type: undefined,
            claim_price: undefined
          },
          // 多退少补
          refund_claim: {
            claim_type: undefined,
            refund_reason: undefined,
            claim_price: undefined,
            claim_describe: undefined
          },
          // 其他
          other_claim: {
            claim_type: undefined,
            claim_describe: undefined
          }
        },
        // 优惠卷
        coupons: [],
        abnormalSolveRules: {
          compensation_num: [
            {
              required: false,
              message: '数量不能为空',
              trigger: 'blur'
            }
          ],
          handsel_num: [
            {
              required: false,
              message: '数量不能为空',
              trigger: 'blur'
            }
          ],
          delivery_time: [
            {
              required: false,
              message: '出库日期不能为空',
              trigger: 'blur'
            }
          ],
          handsel_time: [
            {
              required: false,
              message: '出库日期不能为空',
              trigger: 'blur'
            }
          ]
        },
        refundTypes: [
          {
            label: '重量误差',
            value: 'WEIGHT_ERROR'
          },
          {
            label: '活动优惠',
            value: 'PREFERENTIAL_ACTIVITIES'
          },
          {
            label: '价格错误',
            value: 'PRICE_ERROR'
          }
        ]
      }
    },
    created() {

    },
    mounted() {
      this.id = this.$route.params.sn;
      this.exception_sn = this.$route.query.exceptionSn;
      this.order_sn = this.$route.query.orderSn;
      if (!this.order_sn) {
        this.abnormal_news = false;
        this.getAfterList(this.exceptionId);
      } else {
        this.getDataList();
        this.getDataTime();
      }
    },
    methods: {
      /**
        * @date 2020/10/27
        * @author kaiqiang
        * @description { 获取日期 }
      */
      getDataTime() {
        let tomorrow = new Date();
        tomorrow.setTime(tomorrow.getTime()+24*60*60*1000);
        let date = tomorrow.getFullYear()+"-" + (tomorrow.getMonth()+1) + "-" + tomorrow.getDate();
        this.abnormalSolveForm.compensation_claim.delivery_time_string = date;
        this.abnormalSolveForm.free_claim.delivery_time_string = date;
      },
      // 获取异常数据
      getDataList() {
        this.loading = true;
        API_Messages.getQuerySloveMessage(this.id)
          .then(response => {
            if (response.code === 200) {
              this.exception_order = response.data.exception_order;
              this.order_detail = response.data.order_detail;
              this.abnormalSolveForm.compensation_claim.sku_list = response.data.order_sku_dtolist;
              this.abnormalSolveForm.order_sku_dtolist = response.data.order_sku_dtolist;
              this.abnormalSolveForm.refund_claim.claim_price = response.data.allow_refund_price;
              this.backOut = response.data.allow_refund_price;
              this.abnormalSolveForm.member_id = response.data.order_detail.member_id;
              if (response.data) {
                response.data.allow_refund_price === 0.00 ? this.clearRefundMore = false : this.clearRefundMore = true;
              }
              let data = response.data.coupon_dolist;
              for (let i = 0; i < data.length; i++) {
                let label = data[i].title;
                let value = data[i].coupon_id;
                let item = data[i];
                item['label'] = label;
                item['value'] = value;
                this.coupons = data;
              }
              this.loading = false;
            } else {
              this.$message({
                type: 'error',
                message: response.message
              })
            }
          })
          .catch((error) => {
            console.log(error)
            this.$message({
              type: 'error',
              message: '数据出错, 请联系管理员!!!'
            })
            this.loading = false
          })
      },
      // 获取处理结果
      getAfterList() {
        this.disabled = true;
        this.clearAway = false;
        API_Messages.getAfterSalesList(this.id)
          .then(response => {
            // 清除解决说明DOM
            if (response.claim_describe === null) {
              this.clearDescription = false;
            } else {
              this.abnormalSolveForm.claim_describe = response.claim_describe;
            }
            // 清除赔付商品DOM
            if (response.compensation_claim === null) {
              this.clearReissue = false;
            } else {
              this.reissueGoods = true;
              this.abnormalSolveForm.compensation_claim = response.compensation_claim;
              this.abnormalSolveForm.compensation_claim.delivery_time_string = response.compensation_claim.delivery_time_string;
            }
            // 清除赠送商品DOM
            if (response.free_claim === null) {
              this.clearGiveAway = false;
            } else {
              this.giveAway = true;
              this.abnormalSolveForm.free_claim = response.free_claim;
              this.abnormalSolveForm.free_claim.delivery_time_string = response.free_claim.delivery_time_string;
            }
            // 清除优惠卷DOM
            if (response.coupon_claim === null) {
              this.clearCoupon = false;
            } else {
              this.compensateCoupon = true;
              this.abnormalSolveForm.coupon_claim.coupon_id = response.coupon_claim.coupon_do.title;
            }
            // 清除赔付现金DOM
            if (response.payment_claim === null) {
              this.clearPayMoney = false;
            } else {
              this.payMoney = true;
              this.abnormalSolveForm.payment_claim = response.payment_claim;
            }
            // 清除多退少补DOM
            if (response.refund_claim === null) {
              this.clearRefundMore = false;
            } else {
              this.refundMore = true;
              this.abnormalSolveForm.refund_claim = response.refund_claim;
            }
            // 清除其他DOM
            if (response.other_claim === null) {
              this.clearOther = false;
            } else {
              this.otherTheWay = true;
              this.abnormalSolveForm.other_claim = response.other_claim;
            }
          })
          .catch((error) => {
            console.log(error)
          })  
      },
      // 提交异常解决
      submit(abnormalSolveForm) {
        if (this.reissueGoods === false && this.giveAway === false && this.compensateCoupon === false && this.payMoney === false && this.refundMore === false && this.otherTheWay === false) {
          this.$message({
            type: 'error',
            message: '赔付方式最少选择一个!!!'
          })
          return
        }
        if (this.abnormalSolveForm.free_claim.claim_type === 'FREE_GIFT') {
          if (this.abnormalSolveForm.free_claim.sku_list.length === 0) {
            this.$message({
              type: 'warning',
              message: '赠送礼品最少选择一条'
            })
            return
          }
        }
        if (this.abnormalSolveForm.refund_claim.claim_type !== undefined) {
          if (this.abnormalSolveForm.refund_claim.refund_reason === undefined) {
            this.$message({
              type: 'warning',
              message: '请选择退补原因!!!'
            })
            return
          }
        }
        if (this.abnormalSolveForm.compensation_claim.delivery_time_string) {
          this.abnormalSolveForm.compensation_claim = {
            ...this.abnormalSolveForm.compensation_claim
          }
        }
        if (this.abnormalSolveForm.free_claim.delivery_time_string) {
          this.abnormalSolveForm.free_claim = {
            ...this.abnormalSolveForm.free_claim
          }
        }
        if (this.reissueGoods === true && this.abnormalSolveForm.compensation_claim.delivery_time_string === undefined) {
          this.$message({
            type: 'error',
            message: '补发商品出库日期不能为空'
          });
          return
        } 
        if (this.giveAway === true && this.abnormalSolveForm.free_claim.delivery_time_string === undefined) {
          this.$message({
            type: 'error',
            message: '赠送商品出库日期不能为空'
          });
          return
        }
        if (this.multipleChoice.length > 0) {
          for (let item of this.multipleChoice) {
            if (item.compensation_num === undefined || null) {
              this.$message({
                type: 'error',
                message: '补发数量不能为空!!!'
              })
              return
            }
          }
        }
        let details = this.order_detail;
        this.$confirm(  
          details.order_status_text === '已取消' ? '当前订单状态为' + details.order_status_text + ',确定要继续吗?' 
            : details.order_status_text === '未付款' ? '当前订单状态为' + details.order_status_text + ',确定要继续吗?' 
              : details.service_status === 'APPLY' ? '当前售后状态为' + details.service_status_text + ',确定要继续吗?' 
                : this.abnormalSolveForm.compensation_claim.delivery_time_string !== this.abnormalSolveForm.free_claim.delivery_time_string ? '两个出库日期不一致,确定要继续吗' : '确定要执行此操作吗?',
        )
          .then(() => {
            this.$refs[abnormalSolveForm].validate((valide) => {    
              if (valide) {
                this.abnormalSolveForm.exception_id = this.id;
                this.abnormalSolveForm.exception_sn = this.exception_sn;
                this.abnormalSolveForm.order_sn = this.order_sn;
                this.abnormalSolveForm.compensation_claim.sku_list = this.multipleChoice;
                API_Messages.addClaims(JSON.stringify(this.abnormalSolveForm))
                  .then(response => {
                    if (response.code === 616) {
                      this.$message({
                        type: 'warning',
                        message: response.data
                      })
                    } else if (response.code === 614 || response.code === 615){
                      this.$message({
                        type: 'error',
                        message: response.message
                      })
                    } else if (response.code === 200) {
                      this.$message({
                        type: 'success',
                        message: response.message
                      })
                    }
                    this.$router.push({ path: '/customer/abnormal' })
                  })
                  .catch((error) => {
                    console.log(error)
                  })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'warning',
              message: '操作已取消'
            })
          })
      },
      // 添加商品
      addCommodity() {
        this.ShowDialog = true;
        this.giveAway = true;
      },
      // 关闭弹框
      handleCloseDialog() {
        this.ShowDialog = false;
      },
      // 确定按钮
      defineBtn (value) {
        this.giveAway = true;
        this.abnormalSolveForm.free_claim.sku_list = value;
        this.abnormalSolveForm.free_claim.claim_type = 'FREE_GIFT';
      },
      // 删除商品
      handleDelete(row) {
        this.abnormalSolveForm.free_claim.sku_list.forEach((elem, index) => {
          if (elem.sku_id === row.sku_id) {
            this.abnormalSolveForm.free_claim.sku_list.splice(index, 1)
          }
        })
      },
      // 补发商品
      handleReissueGoodsChange (value) {
        if (value === true) {
          this.abnormalSolveForm.compensation_claim.claim_type = 'COMPENSATION_GOODS';
          this.abnormalSolveForm.compensation_claim.sku_list = this.abnormalSolveForm.order_sku_dtolist;
        }
      },
      // 赠送礼品
      handleGiveAwayChange (value) {
        console.log(value)
        if (value === true) {
          this.abnormalSolveForm.free_claim.claim_type = 'FREE_GIFT';
          this.abnormalSolveRules.handsel_num[0].required = true;
        } else {
          this.abnormalSolveForm.free_claim = {
            ...this.abnormalSolveForm.free_claim
          }
          this.abnormalSolveRules.handsel_num[0].required = false;
        }
      },
      // 补偿有优惠卷
      handleCompensateCouponChange(value) {
        if (value === true) {
          this.abnormalSolveForm.coupon_claim.claim_type = 'AFTERSALE_COUPON';
          this.compensateCoupon = true;
        } else {
          this.abnormalSolveForm = {
            ...this.abnormalSolveForm
          }
          this.compensateCoupon = false;
        }
      },
      // 赔付现金
      handlePayMoneyChange (value) {
        if (value === true) {
          this.abnormalSolveForm.payment_claim.claim_type = 'PAYMENT_CASH';
        } else {
          this.abnormalSolveForm.payment_claim = {
            ...this.abnormalSolveForm.payment_claim
          }
        }
      },
      // 多退少补
      handleRefundMoreChange (value) {
        if (value === true) {
          this.abnormalSolveForm.refund_claim.claim_type = 'REFUND_CASH';
        } else {
          this.abnormalSolveForm.refund_claim = {
            ...this.abnormalSolveForm.refund_claim
          }
        }
      },
      // 其他方式
      handleOtherTheWayChange (value) {
        if (value === true) {
          this.abnormalSolveForm.other_claim.claim_type = 'OTHER';
        } else {
          this.abnormalSolveForm.other_claim = {
            ...this.abnormalSolveForm.other_claim
          }
        }
      },
      // 多选
      selectionChange (value) {
        this.multipleChoice = value;
        if (this.multipleChoice.length > 0) {
          this.reissueGoods = true;
          this.abnormalSolveForm.compensation_claim.claim_type = 'COMPENSATION_GOODS';
        } else {
          this.reissueGoods = false;
        }
      },
      // 监听是否发放优惠卷的长度
      handleCouponChange(value) {
        if (value) {
          this.abnormalSolveForm.coupon_claim.claim_type = 'AFTERSALE_COUPON';
          this.compensateCoupon = true;
        } else {
          this.abnormalSolveForm.coupon_claim = {
            ...this.abnormalSolveForm.coupon_claim
          }
          this.compensateCoupon = false;
        }
      },
      // 监听赔付现金字段的长度
      handlePriceChange(value) {
        if (value.length > 0) {
          this.payMoney = true;
          this.abnormalSolveForm.payment_claim.claim_type = 'PAYMENT_CASH';
        } else {
          this.payMoney = false;
        }
      },
      // 监听多退少补输入的字段长度
      handleRefundTypeChange(value) {
        if (value.length > 0) {
          this.refundMore = true;
          this.abnormalSolveForm.refund_claim.claim_type = 'REFUND_CASH';
        } else {
          this.refundMore = false;
        }
      },
      // 监听其他方式输入的字段长度
      handleOtherChange(value) {
        if (value.length > 0) {
          this.otherTheWay = true;
          this.abnormalSolveForm.other_claim.claim_type = 'OTHER';
        } else {
          this.otherTheWay = false;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  .wrapper {
    padding: 10px;
    background: #FFF;

    /deep/ div.toolbar {
      height: 0px;
    }

    .order-collapse {
      border: 1px solid #e5e5e5;
      /*折叠面板*/
      .el-collapse-item {
        /deep/ .el-collapse-item__header {
          text-align: left;
          background-color: #f8f8f8;
          padding:0 10px;
          font-weight: bold;
          color: #333;
          font-size: 14px;
        }
        /deep/ .el-collapse-item__content {
          padding: 15px;
          text-align: left;
          div {
            margin:5px 10px;
            span.item-name {
              font-weight: bold;
              color: #888;
              font-size: 14px;
              text-align: right;
            }
          }
          hr {
            border-top: 1px dotted #e5e5e5;
          }
        }
      }
      /* 订单信息中的名值对布局 */
      .order-item {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        flex-direction: row;
        align-items: flex-start;
        span {
          display: inline-block;
        }
        span:first-child {
          min-width: 75px;
        }
        span:last-child {
          text-align:left;
        }
      }
    }

    .color-red {
      color: red;
    }

    .top-status {
      margin-top: 30px;
    }

  }
</style>
